<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地震灾害动态地图</title>
    
    <!-- 百度地图API -->
    <script type="text/javascript">
        // 百度地图API加载回调
        window.baiduMapInit = function() {
            console.log("百度地图API加载完成");
            if (window.initMap) {
                window.initMap();
            }
        };
    </script>
    <script src="https://api.map.baidu.com/api?v=3.0&ak=c9V6tNEaS6TsWyg0UvpgQKNLyD5Acjkc"></script>
    <!-- 百度地图扩展库 -->
    <script src="https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <script src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
     
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>地震多维度信息标注系统</h1>
            <div class="subtitle">主震余震频率强度、时间和空间维度可视化</div>
        </header>
        
        <div class="dimension-controls">
            <button id="time-dimension" class="dimension-btn active">时间维度</button>
            <button id="space-dimension" class="dimension-btn">空间维度</button>
        </div>
        
        <!-- 添加天数选择器 -->
        <div class="day-selector">
            <button class="day-btn active" data-day="1">第1天</button>
            <button class="day-btn" data-day="2">第2天</button>
            <button class="day-btn" data-day="3">第3天</button>
            <button class="day-btn" data-day="4">第4天</button>
            <button class="day-btn" data-day="5">第5天</button>
            <button class="day-btn" data-day="6">第6天</button>
            <button class="day-btn" data-day="7">第7天</button>
            <button class="day-btn" data-day="8">第8天</button>
            <button class="day-btn" data-day="9">第9天</button>
            <button class="day-btn" data-day="10">第10天</button>
            <button class="day-btn" data-day="11">第11天</button>
            <button class="day-btn" data-day="12">第12天</button>
            <button class="day-btn" data-day="13">第13天</button>
            <button class="day-btn" data-day="14">第14天</button>
        </div>
        
        <div class="main-content">
            <div class="map-container">
                <!-- 标准地图容器 -->
                <div id="map-container"></div>
                
                <div class="controls">
                    <div class="time-controls">
                        <div class="time-display">
                            <span id="current-day">第1天</span>
                            <span id="current-date">2023年05月12日</span>
                            <span id="current-time">14:28</span>
                        </div>
                        
                        <input type="range" id="time-slider" min="0" max="100" value="0">
                        <div class="time-stages">
                          <span>主震即时坍塌阶段（0-12小时）</span>
                          <span>余震短期二次坍塌阶段（12-72小时）</span>
                          <span>次生灾害中期坍塌阶段（3-14天）</span>
                        </div>
                        
                        <div class="play-controls">
                            <button id="play-pause-btn">▶ 播放</button>
                            <select id="speed-select">
                                <option value="100">1分钟</option>
                                <option value="1000">10分钟</option>
                                <option value="6000">1小时</option>
                                <option value="14400">24小时</option>
                            </select>
                        </div>
                    </div>
                    
                    <div id="space-legend" class="legend hidden">
                        <div class="legend-item">
                            <div class="cluster-icon" style="background-color: rgba(255, 0, 0, 0.7);"></div>
                            <span>高密集区</span>
                        </div>
                        <div class="legend-item">
                            <div class="cluster-icon" style="background-color: rgba(255, 165, 0, 0.7);"></div>
                            <span>中密集区</span>
                        </div>
                        <div class="legend-item">
                            <div class="cluster-icon" style="background-color: rgba(255, 255, 0, 0.7);"></div>
                            <span>低密集区</span>
                        </div>
                    </div>
                    
                    <div id="damage-legend" class="legend">
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #00FF00;"></div>
                            <span>基本完好</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #FFFF00;"></div>
                            <span>损坏</span>
                        </div>
                        <div class="legend-item">
                            <div class="legend-color" style="background-color: #FF0000;"></div>
                            <span>倒塌</span>
                        </div>
                    </div>
                        <div id="road-legend" class="legend">
                            <div class="road-legend-item">
                            <div class="road-line green"></div>
                            <span>道路通畅</span>
                        </div>
                            <div class="road-legend-item">
                            <div class="road-line yellow"></div>
                            <span>部分阻塞</span>
                        </div>
                            <div class="road-legend-item">
                            <div class="road-line red"></div>
                            <span>完全阻塞</span>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <!-- 新增余震信息侧边栏 -->
            <div class="aftershock-sidebar">
                <div class="sidebar-header">
                    <h3>地震信息</h3>
                </div>
                <div id="aftershock-list">
                    <!-- 这里会动态填充余震信息 -->
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>